<template>
  <el-container>
    <el-main >
      <template v-if="state.data">
        <el-descriptions :column="1">
          <el-descriptions-item label="订单状态">{{state.data.status_text}}</el-descriptions-item>
          <el-descriptions-item label="订单编号">{{state.data.order_sn}}</el-descriptions-item>
          <el-descriptions-item label="下单时间">{{state.data.create_time}}</el-descriptions-item>
          <el-descriptions-item label="备注">{{state.data.remark}}</el-descriptions-item>
        </el-descriptions>
        <div style="width: 420px;" v-if="state.data.status !== 'unpaid' && state.data.status !== 'cancel'">
          <el-table border :data="state.data.groupTicket" style="width: 100%">
            <el-table-column prop="code" label="券码" align="center" width="320" />
            <el-table-column prop="status.text" label="状态" align="center" width="100" />
          </el-table>
        </div>
        <el-descriptions class="sa-m-t-20" title="商品信息" :column="1">
          <el-descriptions-item label="商品主图">
            <el-image class="goods-image" :src="checkUrl(state.data.goods_image)" :fit="'cover'" />
          </el-descriptions-item>
          <el-descriptions-item label="商品名称">{{state.data.goods_title}}</el-descriptions-item>
          <el-descriptions-item label="订单数量">{{state.data.goods_num}}</el-descriptions-item>
          <el-descriptions-item label="单价">{{state.data.goods_price}}</el-descriptions-item>
          <el-descriptions-item label="总优惠"></el-descriptions-item>
          <el-descriptions-item label="实付金额">{{state.data.pay_fee}}</el-descriptions-item>
        </el-descriptions>
        <el-descriptions class="sa-m-t-20" title="支付信息" :column="1" v-if="state.data.status !== 'unpaid' && state.data.pay">
          <el-descriptions-item label="支付单号">{{state.data.pay.pay_sn}}</el-descriptions-item>
          <el-descriptions-item label="支付方式">{{state.data.pay.pay_type_text}}</el-descriptions-item>
          <el-descriptions-item label="支付金额">{{state.data.pay.pay_fee}}</el-descriptions-item>
          <el-descriptions-item label="支付时间">{{state.data.pay.create_time}}</el-descriptions-item>
          <el-descriptions-item label="交易单号">{{state.data.pay.transaction_id}}</el-descriptions-item>
        </el-descriptions>
      </template>
    </el-main>
  </el-container>
</template>
<script setup>
  import { onMounted, reactive } from 'vue';
  import { api } from './groupOrder.service';
  import { checkUrl } from '@/sheep/utils/checkUrlSuffix';

  const emit = defineEmits(['modalCallBack']);
  const props = defineProps({
    modal: {
      type: Object,
    },
  });

  const state = reactive({
    data:null
  })

  onMounted(() => {
    if (props.modal.params.id) {
      getData();
    }
  });

  const getData = async () => {
    const { error, data } = await api.info(props.modal.params.id);

    if (error === 0) {
      state.data = data;
    }
  };
</script>

<style scoped lang="scss">
  .goods-image {
    width: 60px;
    height: 60px;
    border-radius: 4px;
  }

  :deep() .el-descriptions__cell {
    display: flex;
  }

  :deep() .el-descriptions__content {
    display: flex;
  }
</style>
